<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">div1</div>
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
    </ul>

    <input type="text" name="username" id="">
    <script>
        /*
            dom
                把页面中标签 变为 dom对象，通过dom对象 控制页面中标签

                一个 dom对象 指的一个标签

                学习dom--CRUD(增删改查) 的 API（一堆属性和方法）


                dom的查询--怎么获取页面中一个dom对象


        */
        // 1-通过id获取dom--结果是一个dom对象，参数 id 字符串
        var div = document.getElementById('box');
        console.log(div);
        console.log(typeof div);
        // **********设置的行内样式
        div.style.color = 'red';
        // 驼峰命名 background-color
        div.style.backgroundColor = 'green';

        // 2-通过类名获取元素
        //参数是类名
        // 返回 一个伪数组  有下标 0 1  有length属性
        var liArr = document.getElementsByClassName('item');
        console.log(liArr);
        console.log(liArr.length);
        console.log(liArr[0]);
        console.log(liArr[1]);
        // 循环遍历
        for (var i = 0; i < liArr.length; i++) {
            liArr[i].style.color = 'red'
        }

        // 3-通过标签名
        //参数是标签名
        // 返回 一个伪数组  有下标 0 1  有length属性
        var liArr2 = document.getElementsByTagName('li');
        console.log(liArr2);


        // 4-通过name属性
        //参数是name属性的值
        // 返回 一个伪数组  有下标 0 1  有length属性
        var iptArr = document.getElementsByName('username');
        console.log(iptArr);
        console.log(iptArr[0]);


        // 5-*****querySelector（常用）
        // 通过css选择器 获取元素 -
        // 参数是css选择器
        // 返回值 css选择器匹配到的第一个元素
        var item = document.querySelector('.item');
        console.log(item);
        item.innerHTML = 'aa'

        // 6-*****querySelectorAll （常用）
        // 通过css选择器 获取元素 -
        // 参数是css选择器
        // 返回值 css选择器匹配到的所有元素 伪数组
        var itemArr = document.querySelectorAll('.item');
        console.log(itemArr);
        console.log(itemArr.length);
        console.log(itemArr[0]);
        // querySelectorAll 的结果  可以使用forEach变量 --遍历dom元素 forEach  
        itemArr.forEach(function (v, i) {
            console.log(v);//伪数组中每一个元素
            console.log(i);//伪数组中每一个元素 对应的下标
        })



    </script>

</body>

</html>